<template>
  <el-select v-model="selectedAppid" size="small" v-loading="dataListLoading" @change="selectAccount" filterable>
    <el-option v-for="item in accountList" :key="item.appid" :label="item.name+'（'+ACCOUNT_TYPES[item.type]+'）'"
               :value="item.appid"></el-option>
  </el-select>
</template>
<script>
  import { mapState } from 'vuex'
  import { listAccount } from "@/api/wx/account";
  export default {
    data() {
      return {
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: undefined,
          type: undefined,
          verified: undefined,
          secret: undefined,
          token: undefined,
          aesKey: undefined
        },
        dataListLoading: false
      }
    },
    computed: mapState({
      accountList: state => state.wxAccount.accountList,
      ACCOUNT_TYPES: state => state.wxAccount.ACCOUNT_TYPES,
      selectedAppid: state => state.wxAccount.selectedAppid
    }),
    mounted() {
      this.getDataList()
    },
    methods: {
      getDataList() {
        this.dataListLoading = true
        listAccount(this.queryParams).then(response => {
          this.dataListLoading = false
          this.$store.commit('wxAccount/updateAccountList', response.rows)
        });
      },
      selectAccount(appid) {
        if (this.selectedAppid != appid) {
          this.$store.commit('wxAccount/selectAccount', appid)
        }
      }
    }
  }
</script>
